home *** CD-ROM | disk | FTP | other *** search
/ Chip 2004 November / CMCD1104.ISO / Util / AtiXP / wxp-w2k-catalyst-8-051-040825a-017633c.exe / WDM / data2.cab / {app} / styles / Tiqur / gallery.xsl
Encoding:
Extensible Markup Language  |  2004-09-20  |  17.0 KB  |  418 lines
  1. <?xml version='1.0'?>
  2. <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
  3.                 xmlns:exsl="http://exslt.org/common" 
  4.                 xmlns:func="http://exslt.org/functions"
  5.                 xmlns:dyn="http://exslt.org/dynamic"
  6.                 xmlns:math="http://exslt.org/math"
  7.                 xmlns:str="http://exslt.org/strings"
  8.                 xmlns:g="."
  9.                 xmlns:galleroo="."
  10.                 extension-element-prefixes="dyn func exsl math str g galleroo" 
  11.                 version='1.1'>
  12. <xsl:include href="../Lib/galleroo.xsl" />
  13. <xsl:output method="html" /> 
  14.  
  15. <!-- doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN" indent="yes" -->
  16.  
  17. <!-- Galleroo Tiqur XSL XML->HTML stylesheet 1.0
  18.      Copyright 2004, all rights reserved, xyster.net
  19.      written:     2/7/04
  20.      modified:  
  21.      author:     xyster
  22.  
  23.      comments:     
  24. -->
  25.  
  26. <xsl:param name="source-folder" />
  27.  
  28. <xsl:param name="sort-by">name</xsl:param>
  29. <xsl:param name="title">Annotation Gallery</xsl:param>
  30. <xsl:param name="sub-title">titles and comments</xsl:param>
  31. <xsl:param name="text-color">#000000</xsl:param>
  32. <xsl:param name="nav-background-color">#FFFFFF</xsl:param>
  33. <xsl:param name="slide-background-color">#FFFFFF</xsl:param>
  34. <xsl:param name="link-color">#000066</xsl:param>
  35. <xsl:param name="visited-link-color">#990099</xsl:param>
  36. <xsl:param name="active-link-color">#FF0000</xsl:param>
  37. <xsl:param name="thumb-size">75</xsl:param>
  38. <xsl:param name="html-file-prefix" />
  39. <xsl:param name="nav-background-image" />
  40. <xsl:param name="slide-background-image" />
  41. <xsl:param name="font" />
  42. <xsl:param name="nav-alignment">left</xsl:param>
  43. <xsl:param name="do-auto-play-movies">no</xsl:param>
  44. <xsl:param name="_preview">0</xsl:param>
  45.  
  46. <xsl:template match="list">
  47.                
  48.      <!-- frameset -->
  49.        <xsl:call-template name="gal-emit-frameset">
  50.         <xsl:with-param name="preview" select="$_preview" />
  51.         <xsl:with-param name="title" select="$title" />
  52.         <xsl:with-param name="sub-title" select="$sub-title" />
  53.         <xsl:with-param name="nav-alignment" select="$nav-alignment" />
  54.         <xsl:with-param name="sort-by" select="$sort-by" />
  55.         <xsl:with-param name="thumb-size" select="$thumb-size" />
  56.         <xsl:with-param name="padding" select="40" />
  57.         <xsl:with-param name="html-file-prefix" select="$html-file-prefix" />
  58.     </xsl:call-template>
  59.     
  60.     <!-- initial blank page -->
  61.     <xsl:call-template name="emit-start-slide">
  62.         <xsl:with-param name="title" select="$title" />
  63.         <xsl:with-param name="sub-title" select="$sub-title" />
  64.         <xsl:with-param name="html-file-prefix" select="$html-file-prefix" />
  65.     </xsl:call-template>
  66.     
  67.     <!-- nav bar -->
  68.     <xsl:call-template name="emit-nav-bar">
  69.         <xsl:with-param name="alignment" select="$nav-alignment" />
  70.         <xsl:with-param name="sort-by" select="$sort-by" />
  71.         <xsl:with-param name="html-file-prefix" select="$html-file-prefix" />
  72.     </xsl:call-template>
  73.     
  74.     <!-- generate the picture pages -->
  75.     <xsl:call-template name="emit-slides">
  76.         <xsl:with-param name="pix" select="media/object/children/object/children/object" />
  77.         <xsl:with-param name="title" select="$title" />
  78.         <xsl:with-param name="sub-title" select="$sub-title" />
  79.         <xsl:with-param name="do-auto-play-movies" select="$do-auto-play-movies" />
  80.         <xsl:with-param name="html-file-prefix" select="$html-file-prefix" />
  81.     </xsl:call-template>
  82.     
  83.     <!-- generate the result page -->
  84.     <xsl:call-template name="emit-result-page">
  85.         <xsl:with-param name="html-file-prefix" select="$html-file-prefix" />
  86.     </xsl:call-template>
  87.     
  88.             
  89. </xsl:template>
  90.  
  91. <!-- emit ye explanation slide -->
  92. <xsl:template name="emit-start-slide">
  93.     <xsl:param name="title" />
  94.     <xsl:param name="sub-title" />
  95.     <xsl:param name="html-file-prefix" />
  96.  
  97.     <html>
  98.     <head>
  99.         <title><xsl:value-of select="$title" /> - <xsl:value-of select="$sub-title" /></title>
  100.     </head>
  101.     <body class="slide-page">
  102.         <!-- title -->
  103.         <div align="center"><h1><xsl:value-of select="$title" /> - <xsl:value-of select="$sub-title" /></h1></div>
  104.         <div align="left">
  105.         <h2>Welcome</h2>
  106.         <p>
  107.         Please read all instructions before proceeding.<br />
  108.         Using this gallery you can annotate your images and create an annotation file for Galleroo to use
  109.         in the galleries it creates.
  110.         </p>
  111.         To start annotating your images click the thumbnails on the left.
  112.         When you click a thumbnail, this page will be replaced with a slide of the image and text boxes for you 
  113.         to enter an image title, a caption and a detailed comment. You can leave any of the text boxes empty. 
  114.         When you are satisfied with the descriptions you typed in, click 'Confirm' and continue 
  115.         to the next image using the thumbnail bar on the left.<br />
  116.         When you are done annotating the images, click the 'Create Info File' link. You can find the link on the
  117.         bottom of the thumbnail bar or on the top left of any slide page. The 'Create Info File' link will
  118.         create the text required for Galleroo to annotate your images and provide you with the instructions 
  119.         written below so you don't have to memorize them.<br />
  120.         Once you have created the annotation text, create a file named 'info.txt' in the source folder,
  121.         <xsl:value-of select="$source-folder" />, 
  122.         and copy the text from the page into the file and save it. Galleroo will
  123.         now use the annotation file when creating galleries for the images in the source folder.
  124.         </div>
  125.     
  126.     
  127.         <!-- lister signature -->
  128.           <div style="padding: 5em;">
  129.           <xsl:call-template name="gal-emit-signature" />
  130.           </div>
  131.     </body>
  132.     </html>
  133.     
  134.     <!-- cutter output -->
  135.     <xsl:text> </xsl:text>
  136.     <xsl:comment>CUTHERE: <xsl:value-of select="galleroo:rplstr($html-file-prefix, '-', '\-')" />blank.html ?</xsl:comment>
  137.     <xsl:text> </xsl:text>
  138.  
  139. </xsl:template>
  140.  
  141. <xsl:template name="emit-result-page">
  142.     <xsl:param name="html-file-prefix" />
  143.  
  144.     <html>
  145.     <head>
  146.         <title>Galleroo User Info</title>
  147.  
  148.         <script language="javascript">
  149.         
  150.         function generate()
  151.         {
  152.          var text;
  153.          
  154.          text = "";
  155.          
  156.          for (i = 1; i <= <xsl:number value="count(media/object/children/object/children/object)" />; i++)
  157.            {
  158.             text += parent.navFrame.info[i].file + "\n";
  159.             text += parent.navFrame.info[i].title + "\n";
  160.             text += parent.navFrame.info[i].caption + "\n";
  161.             text += parent.navFrame.info[i].comment + "\n\n";
  162.            }
  163.            
  164.          document.forms["result"].text.value = text;
  165.          
  166.          document.forms["result"].text.focus();
  167.          document.forms["result"].text.select();  
  168.         }
  169.         </script>
  170.     
  171.     </head>
  172.     <body class="slide-page" onload="generate()">
  173.     <form name="result">
  174.     <div align="center">
  175.         <h1>Ready!</h1>
  176.     </div>
  177.     <div align="center">
  178.         <h2>Create a file named 'info.txt' in the gallery source folder, <xsl:value-of select="$source-folder" />. Copy and paste the text below into 
  179.             'info.txt' and save the file. Galleroo will now use the information in 'info.txt' to 
  180.             annotate galleries!</h2>
  181.     </div>
  182.     <div align="center">
  183.         <textarea name="text" cols="60" rows="20">
  184.         </textarea>
  185.     </div>
  186.     </form>
  187.     
  188.     <!-- lister signature -->
  189.       <xsl:call-template name="gal-emit-signature" />
  190.     
  191.     </body>
  192.     </html>
  193.  
  194.     <!-- cutter output -->
  195.     <xsl:text> </xsl:text>
  196.     <xsl:comment>CUTHERE: <xsl:value-of select="galleroo:rplstr($html-file-prefix, '-', '\-')" />result.html ?</xsl:comment>
  197.     <xsl:text> </xsl:text>
  198.     
  199. </xsl:template>
  200.  
  201. <!-- Navigation Bar -->
  202. <xsl:template name="emit-nav-bar">
  203.     <xsl:param name="alignment" />
  204.     <xsl:param name="sort-by" />
  205.     <xsl:param name="html-file-prefix" />
  206.     
  207.     <xsl:variable name="quot">"</xsl:variable>
  208.     <xsl:variable name="apos">'</xsl:variable>
  209.     <html>
  210.     <head>
  211.         <title>Galleroo Nav Bar</title>
  212.         
  213.         <script language="javascript">
  214.         
  215.         if (typeof HTMLElement != 'undefined')
  216.          {
  217.              eval("HTMLElement.prototype.innerText getter = function() { return this.innerHTML.replace(/<<xsl:text>[</xsl:text>^><xsl:text>]</xsl:text>+>/g,''); }");
  218.           eval("HTMLElement.prototype.innerText setter = function(txtStr) { var parsedText = document.createTextNode(txtStr); this.innerHTML = ''; this.appendChild( parsedText ); }");
  219.          }
  220.          
  221.         var info = new Array(<xsl:number value="count(media/object/children/object/children/object)" />);
  222.     
  223.         <xsl:for-each select="media/object/children/object/children/object">
  224.             <xsl:sort select="attrib/*[name()=$sort-by]" />
  225.             info[<xsl:number />] = new Object;
  226.             info[<xsl:number />].file    = "<xsl:value-of select="attrib/name" />";
  227.             info[<xsl:number />].title   = "<xsl:value-of select="translate(galleroo:image-title(attrib), $quot, $apos)" />";
  228.             info[<xsl:number />].caption = "<xsl:value-of select="translate(attrib/user-caption, $quot, $apos)" />";
  229.             info[<xsl:number />].comment = "<xsl:value-of select="translate(galleroo:image-comment(attrib), $quot, $apos)" />";
  230.         </xsl:for-each>
  231.         
  232.         function notify(n)
  233.         {
  234.          <!-- XXX come up with a better way to do this...
  235.          -->
  236.          document.links[n * 2].innerText = info[n].title;
  237.         }
  238.        
  239.         </script>
  240.         
  241.     </head>
  242.     <body class="index-page">
  243.     
  244.     <xsl:choose>
  245.     
  246.     <!-- vertical nav bar -->
  247.     <xsl:when test="$alignment = 'left' or $alignment = 'right'">
  248.         <!-- home link -->
  249.         <div align="center">
  250.             <a href="../index.html" target="_top">Home</a>
  251.         </div>
  252.     
  253.         <div align="center">
  254.             <table class="thumb-table" align="center" border="0">
  255.              <xsl:for-each select="media/object/children/object/children/object">
  256.                 <xsl:sort select="attrib/*[name()=$sort-by]" />
  257.                 <tr>
  258.                     <td align="center"><a target="main" href="{$html-file-prefix}{attrib/name}.html"><img class="thumb" width="{attrib/thumb-x-size}" height="{attrib/thumb-y-size}" src="{attrib/thumb-path}/{attrib/thumb-name}" border="0" /></a></td>
  259.                 </tr>
  260.                 <tr>
  261.                     <td align="center"><a name="n{position()}" target="main" href="{$html-file-prefix}{attrib/name}.html"><xsl:value-of select="galleroo:image-title(attrib)" /></a>
  262.                     </td>
  263.                    </tr>
  264.                </xsl:for-each>
  265.             </table>
  266.         </div>
  267.     </xsl:when>
  268.     
  269.     <!-- horizontal nav bar -->
  270.     <xsl:otherwise>
  271.         <!-- home link -->
  272.         <div align="left">
  273.             <a href="../index.html" target="_top">Home</a>
  274.         </div>
  275.     
  276.         <!-- thumbnails -->
  277.         <div align="center">
  278.             <table class="thumb-table" align="center" border="0">
  279.              <tr>
  280.              <xsl:for-each select="media/object/children/object/children/object">
  281.                 <xsl:sort select="attrib/*[name()=$sort-by]" />
  282.                 <td align="center"><a target="main" href="{$html-file-prefix}{attrib/name}.html"><img class="thumb" width="{attrib/thumb-x-size}" height="{attrib/thumb-y-size}" src="{attrib/thumb-path}/{attrib/thumb-name}" border="0" /></a></td>
  283.             </xsl:for-each>
  284.             </tr>
  285.             <tr>
  286.                <xsl:for-each select="media/object/children/object/children/object">
  287.                 <xsl:sort select="attrib/*[name()=$sort-by]" />
  288.                 <td align="center">
  289.                 <a name="n{position()}" target="main" href="{$html-file-prefix}{attrib/name}.html"><xsl:value-of select="galleroo:image-title(attrib)" /></a>
  290.                 </td>
  291.               </xsl:for-each>
  292.             </tr>
  293.             </table>
  294.         </div>   
  295.     </xsl:otherwise>
  296.     </xsl:choose> 
  297.     
  298.         <div align="center" style="padding:.5em;">
  299.             <a target="main" href="{$html-file-prefix}result.html"><h1>Create Info File</h1></a>
  300.         </div>
  301.     
  302.     </body>
  303.     </html>
  304.             
  305.     <!-- cutter output -->
  306.     <xsl:text> </xsl:text>
  307.     <xsl:comment>CUTHERE: <xsl:value-of select="galleroo:rplstr($html-file-prefix, '-', '\-')" />nav.html ?</xsl:comment>
  308.     <xsl:text> </xsl:text>
  309.  
  310. </xsl:template> 
  311.  
  312. <!-- emit ye simple slide pages -->
  313. <xsl:template name="emit-slides">
  314.     <xsl:param name="pix" />
  315.     <xsl:param name="title" />
  316.     <xsl:param name="sub-title" />
  317.     <xsl:param name="do-auto-play-movies" />
  318.     <xsl:param name="html-file-prefix" />
  319.     
  320.     <xsl:for-each select="$pix">
  321.         <xsl:sort select="attrib/*[name()=$sort-by]" />
  322.         <html>
  323.             <xsl:comment> Transformed from XML with Galleroo XSL stylesheet 1.0</xsl:comment>
  324.             <xsl:comment> Source path='<xsl:value-of select="$source-root/list/media/basepath" />' </xsl:comment>
  325.         <head>
  326.             <title><xsl:value-of select="galleroo:image-title(attrib)" /><xsl:value-of select="galleroo:image-caption(attrib)" /></title>
  327.         
  328.             <script language="javascript">
  329.             
  330.             function setup()
  331.             {
  332.              document.forms["note"].title.value = parent.navFrame.info[<xsl:number />].title;
  333.              document.forms["note"].caption.value = parent.navFrame.info[<xsl:number />].caption;
  334.              document.forms["note"].comment.value = parent.navFrame.info[<xsl:number />].comment;
  335.             }
  336.             
  337.             function save()
  338.             {
  339.              // first make sure the comment does not have empty lines in it
  340.              var comment = document.forms["note"].comment.value;
  341.              var i, j;
  342.              
  343.              for (i = 0; i < comment.length; i++)
  344.                {
  345.                 if (comment.charAt(i) == '\n')
  346.                  {
  347.                   j++;
  348.                   if (j == 2)
  349.                    {
  350.                     alert("Cannot save a comment with an empty line. Please remove any empty lines in the comment.");
  351.                     return;
  352.                    }
  353.                  } else
  354.                  {
  355.                   j = 0;
  356.                  } 
  357.                }
  358.              
  359.              // if all is ok, then save
  360.              parent.navFrame.info[<xsl:number />].title = document.forms["note"].title.value;
  361.              parent.navFrame.info[<xsl:number />].caption = document.forms["note"].caption.value;
  362.              parent.navFrame.info[<xsl:number />].comment = document.forms["note"].comment.value;
  363.             
  364.              parent.navFrame.notify(<xsl:number />);
  365.             }
  366.             
  367.             </script>
  368.         
  369.         </head>
  370.         <body class="slide-page" onload="setup()">
  371.             <form name="note">
  372.             
  373.             <div align="left">
  374.                 <h2><a href="{$html-file-prefix}result.html">Create Info File</a> | <a href="{$html-file-prefix}blank.html">Review Instructions</a></h2>
  375.             </div>
  376.           
  377.             <!-- image -->
  378.             <xsl:call-template name="gal-emit-image">
  379.                 <xsl:with-param name="do-auto-play-movies" select="$do-auto-play-movies" />
  380.             </xsl:call-template>
  381.  
  382.             <!-- subtitle -->
  383.             <div style="text-align:center; margin-left:auto; margin-right:auto; align:center; padding:.5em;">
  384.             Title: <input size="40" name="title" value="" /> -
  385.             <input size="40" name="caption" value="" /> :Caption
  386.             </div>
  387.             
  388.               <!-- comment -->
  389.               <!-- IE is retarded and won't honor style placement directives when it has a textarea or button in it -->
  390.             <div align="center" style="padding:.5em;">
  391.                 Comment:<br/> 
  392.                 <textarea name="comment" cols="50" rows="10"> </textarea>
  393.             </div> 
  394.             <div align="center" style="padding:.5em;">
  395.                 Please note: a comment can have as many lines as you want but 
  396.                              it cannot have any empty lines. 
  397.             </div>            
  398.             <div align="center" style="padding:.5em;">
  399.                 <input type="button" value="                    Confirm                    " onClick="save();" name="button" />
  400.             </div>
  401.           
  402.             <!-- lister signature -->
  403.               <xsl:call-template name="gal-emit-signature" />
  404.               
  405.               </form>
  406.         </body>
  407.         </html>
  408.  
  409.         <!-- cutter output -->
  410.         <xsl:text> </xsl:text>
  411.         <xsl:comment>CUTHERE: <xsl:value-of select="galleroo:rplstr(concat($html-file-prefix, attrib/name), '-', '\-')" />.html ?</xsl:comment>
  412.         <xsl:text> </xsl:text>
  413.  
  414.     </xsl:for-each>    
  415. </xsl:template>
  416.  
  417. </xsl:stylesheet>
  418.